<template>
	<view class="container">
		<block v-for="(sellerInfo, index) in sellerList" :key="index">
			<view class="sellerinfo-card" style="margin-top: 20upx;">
				<view class='container-item'  @click="clickRouterTo(sellerInfo)">
					<view class="seller-img">
						<image :src="sellerInfo.avatar" mode="aspectFit"></image>
					</view>
					
					<view style="width: 100%; margin-left: 20upx;">
						<!-- 商家名字 -->
						<text class="sellerinfo-title">{{sellerInfo.username?sellerInfo.username:'我是商家'}}</text>
						<!-- 商家的月销售，评分 -->
						<view style="display: flex;justify-content: space-between;">
							<view style="display: flex;justify-content: flex-start;">
								<!-- 商家评分 -->
								<view class="seller-score">
									<image src="../../static/images/xingxing.svg"></image>
									<view>{{sellerInfo.score? sellerInfo.score : 0}}</view>
								</view>
								
								<!-- 月销售 -->
								<view style="margin-left: 20upx;">月售{{monthSalesFormat(sellerInfo.monthSales)? monthSalesFormat(sellerInfo.monthSales): 0}}</view>
							</view>
							
							<!-- 商家距离配送时间等等 -->
							<view style="display: flex;justify-content: flex-end;">
								<view style="margin-right: 10upx;">44分钟</view>
								<view style="margin-right: 10upx;">12.2km</view>
							</view>
						</view>
						
						<!-- 起送，配送，人均 -->
						<view style="display: flex;justify-content:flex-start;">
							<text>起送 ￥{{sellerInfo.upToSend? sellerInfo.upToSend : 0}}</text>
							<text>配送 ￥{{sellerInfo.deliveryPrice? sellerInfo.deliveryPrice : 0}}</text>
							<text>人均 ￥{{sellerInfo.perAverage? sellerInfo.perAverage: 0}}</text>
						</view>
						
						<text>长沙第一津市牛肉粉店</text>			
					</view>
				</view>
			</view>
		</block>
		
		<view v-if="!hasSellerList" style="align-items: center;display: flex;justify-content: center;font-size: 20upx;">
			<text>数据到底了~~</text>
		</view>
	</view>
</template>

<script>
	import {getRequest, getPost} from '../..//api/api.js'; // 请求接口
	import {upSellerList} from '../../api/request.js'; // 请求路径
	import {errdata} from '../../api/errdata.js'; // 请求路径
	
	export default {
		data() {
			return {
				hasSellerList: true,
				page: 0,
				size: 10,
				sellerList:[]
			}
		},
		methods: {
			monthSalesFormat(str) {
				// 将字符串转换为数字
				let pNum = parseInt(str);
				if(pNum > 9999) return '9999+';
				return pNum;
			},
			
			/* 点击商家头像进行跳转 */
			clickRouterTo(sellerInfo) {
				// 点击了商家面板,进行跳转到商家信息商品展示
				console.log("点击了商家面板,进行跳转到商家信息商品展示");
				console.log(sellerInfo.sellerId);
				let id = sellerInfo.sellerId;
				console.log(id+"---");
				uni.navigateTo({
					url:`../../pages/sellershow/sellershow?sellerId=`+sellerInfo.sellerId
				})
			},
			
			
			/* 请求后台获取数据  */
			getSellerInfo() {
				let param = {};
				let url = `${upSellerList}page=${this.page}&size=${this.size}`;
				console.log(url);
				getPost(url, param)
					.then((res)=> {
						if(res.data.data.pageResult.records.length == 0) { // 说明到底了
						console.log("说明到底了");
							console.log(res.data.data.pageResult);
							this.hasSellerList = false;
							return;
						} else {
							console.log(res.data);
							this.sellerList = res.data.data.pageResult.records;
							this.page = res.data.data.pageResult.current+1;
							this.size = res.data.data.pageResult.size;
							console.log("下一步的数据页" + this.page + " " + this.size);
						}
						
						
						// 这里应该是push到数组后面，进行拉到低的时候进行请求后台
					})
					.catch((err)=> {
						console.log("获取商家数据出错");
						errdata.errlist("获取商家数据出错");
					})
			}
 		},
		
		// 挂载的时候执行
		mounted() {
			this.getSellerInfo()
		},
		
		// 计算属性
		computed: {
			
		},
		
		
		
	}
</script>

<style scoped>
	.container {
		padding: 0upx 0upx 0upx 0upx;  /* 将内边距设置为0，那么就会和上面的组件一样长 */
		/* height: 1000upx; */
		/* width: 100%; */
		margin-top: 20upx;
	}
	
	/* 商家信息卡片 */
	.sellerinfo-card {
		padding: 5upx;
		margin-left: 5upx;
		margin-right: 5upx;
		background-color: white;
		border-radius: 10upx 10upx 10upx 10upx;
	}

	/* 商家信息展示的区域 */
	.container-item {
		padding: 10upx 10upx 10upx 10upx;
		/* border: 1upx solid #000000; */
		overflow: hidden;
		display: flex; 
		justify-content: space-between;
		margin: 30upx 0;
		border-radius: 10upx; /* 圆角*/
	}	
	
	.seller-img {
		padding: 0upx 0upx 0upx 0upx;
		/* background-color: yellow; */
		width: 300upx !important; 
		height: 200upx !important;
		border-radius: 25upx; /* 圆角*/
	}
		
	/* 商家的头像图片 */
	.seller-img  image{
		width: 100%; 
		height: 100%; 
	}
	
	/* 商家名字 */
	.sellerinfo-title {
		overflow: hidden; /* 超过外层隐藏 */
	}
	
	.seller-score {
		display: flex;
		align-items: center;
		/* margin-right: 5upx; */
	}
	
	/* 商家评分的星星 */
	.seller-score image {
		width: 30upx;
		height: 30upx;
		margin-right: 5upx;
	}
	
</style>
